<template>
  <!-- :style="`height:calc(100vh - ${(deviceInfo.statusBarHeight * 2) || 66}rpx);`" -->
  <!-- 订单详细 -->
  <view class="orderbetails relative">
    <!--  -->
    <view class="margin" style="height: 300rpx">
      <image
        src="http://storage.dezhoucloud.com/img/pay/swiper.png"
        mode="heightFix"
        style="width: 346rpx; height: 300rpx"
      >
      </image>
    </view>
    <!--  -->
    <u-gap class="margin" height="20" bgColor="#fff"></u-gap>
    <!--  -->
    <view class="item1 orderbetails-xinxi margin ml10" style="display: flex">
      <view class="" style="width: 100%">
        <u-row class="mt8 ms10">
          <u-col span="4">
            <view class="demo-layout bg-purple-light">
              <!-- <view class="size_16 font_b">{{form.uname ||  '默认用户'}}</view> -->
              <h2>{{ form.uname }}</h2>
            </view>
          </u-col>
          <u-col span="6">
            <view class="wid55 demo-layout bg-purple">
              <!-- size="large" -->
              <!-- size="large" -->
              <u-tag
                @click="payYesOrNo(form.uemployeeid)"
                v-if="!form.isAttention"
                text="关注"
				size="large"
                type="success"
                shape="circle"
              ></u-tag>
              <u-tag
                @click="payYesOrNo(form.uemployeeid)"
                v-else
				size="large"
                text="取关"
                type="primary"
                shape="circle"
              ></u-tag>
            </view>
          </u-col>
          <u-col span="4">
            <view class="demo-layout bg-purple-light">
              <u-avatar :src="form.uheadPic" ></u-avatar>
            </view>
          </u-col>
        </u-row>
        <u-row class="mt8 ms10">
          <u-col span="4">
            <view class="demo-layout bg-purple" style="height: 40rpx">
              <h3>{{ form.utechp }}</h3>
            </view>
          </u-col>
          <u-col span="3">
            <view class="demo-layout bg-purple">
              <!-- <view class="size_14">{{form.udepartmentname || "外科"}}</view> -->
              <h4>{{ form.udepartmentname }}</h4>
            </view>
          </u-col>
        </u-row>
        <u-row class="mt8 ms10">
          <u-col span="6">
            <view class="demo-layout bg-purple-light">
              <!-- <view class="size_14 ">{{form.ucompname || '北京第一人民医院'}}</view> -->
              <h4>{{ form.ucompname }}</h4>
            </view>
          </u-col>
          <u-col span="4"> </u-col>
        </u-row>
        <u-row class="mt8 ms10">
          <u-col>
            <view class="demo-layout bg-purple-light">
              <!-- <view class="size_14 ">{{form.introduction || '医生手术高明且为人正派'}}</view> -->
              <h5>{{ form.introduction }}</h5>
            </view>
          </u-col>
        </u-row>
        <u-row class="mt8 ms10">
          <u-col span="4">
            <view class="demo-layout bg-purple-light"> 问诊价格： </view>
          </u-col>
          <u-col span="4">
            <view class="demo-layout bg-purple-light">
              <!-- 格式化价格 -->
              <u--text
                mode="price"
                size="16"
                :bold="true"
                color="#5d5de9"
                :text="Price"
              ></u--text>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>
    <!--  -->
    <view class="fixed w-full" style="bottom: 0">
      <button type="primary" class="piccon_button" @click="go">
        <text class="font-md ml-2">下一步</text>
      </button>
      <u-gap></u-gap>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      /* 支付 */
      popupData: {
        overlay: true,
        mode: "bottom",
        round: 10,
        closeOnClickOverlay: true,
        closeable: true,
      },
      active: 0,
      /* 弹框 */
      show3: false,
      show: false,
      title: "取消订单",
      content: "是否确认取消订单?",
      /*  */
      form: {
        introduction: null,
        ucompname: null,
        udepartmentname: null,
        uemployeeid: "",
        uheadPic: "",
        uname: "",
      },
      /*  */
      list5: [
        {
          url: "http://storage.dezhoucloud.com/img/pay/swiper.png",
        },
        {
          url: "http://storage.dezhoucloud.com/img/pay/swiper2.png",
        },
        {
          url: "http://storage.dezhoucloud.com/img/pay/swiper22.png",
        },
      ],
      /*  */
      chatData: null,
    };
  },

  computed: {
    Price() {
      return uni.$u.priceFormat(this.form.consultationPrice);
    },
  },
  onLoad(options) {
    let data = JSON.parse(decodeURIComponent(options.data));
    this.form = data;
  },
  onShow() {
    this.getDoctorDetail(this.form.uemployeeid);
  },
  methods: {
    go() {
      let obj = uni.setStorageSync("orderData", {
        diseaseDescription: "",
        imagePic: [],
        xtUserFamily: "",
        uemployeeid: this.form.uemployeeid,
      });
      this.$pub.go(
        `/pages_home/description/description?data=` +
          encodeURIComponent(JSON.stringify(this.form))
      );
    },
    async getDoctorDetail(id) {
      let re = await this.$API.doctorApi.getDoctorDetail(id);
      this.form = {
        ...re,
      };
    },

    /* 关注 */
    async payYesOrNo(id) {
      let re = await this.$API.payDocApi.payDoc(id);
      this.getDoctorDetail(this.form.uemployeeid);
    },
    cancelOrder() {
      this.active = e;
    },
    getList(e) {
      this.active = e;
      this.show = true;
    },
    async sendPay() {
      let re = await this.$API.payApi.placeOrder({
        uemployeeid: this.form.uemployeeid,
        userid: uni.getStorageSync("userInfo").userid,
      });
      //
      this.chatData = re;
      try {
        let ree = await this.$API.payApi.sendPay(re.orderNo);
        uni.showToast({
          title: "支付成功",
        });
        uni.navigateTo({
          url: `/pages/chat/chat?data=${encodeURIComponent(
            JSON.stringify(this.chatData)
          )}`,
        });
      } catch (e) {
        uni.showToast({
          title: "支付失败",
        });
      }
      this.show = false;
    },
    close() {
      this.show = false;
    },
    showModal() {
      this.show3 = true;
    },
    confirm() {
      this.show3 = false;
      uni.navigateBack();
      // setTimeout(() => {
      // 	// 3秒后自动关闭

      // }, 3000)
    },
    cancel() {
      this.show3 = false;
      console.log("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
  // color: goldenrod;
  font-size: 50rpx;
}

.btn {
  width: 690rpx;
  height: 104rpx;
  background: #7976e9;
  border-radius: 52rpx 52rpx 52rpx 52rpx;
  opacity: 1;
}

/*支付  */
.orderbetails-xinxi-right-hd {
  display: flex;
  align-items: center;

  .orderbetails-xinxi-right-name {
    font-size: 30rpx;
    color: #161712;
  }

  .orderbetails-xinxi-right-dh {
    font-size: 22rpx;
    color: #666;
    margin-left: 30rpx;
  }
}

/*  */
.orderbetails {
  // background-color: #F5F5F5;

  .orderbetails-fahuo {
    background-color: #7976e9;
    padding: 30rpx 20rpx;
    box-sizing: border-box;

    .orderbetails-fahuo-hd {
      display: flex;

      .orderbetails-fahuo-hd-left {
        width: 40rpx;
        height: 40rpx;
      }

      .orderbetails-fahuo-hd-right {
        margin-left: 20rpx;
        font-size: 35rpx;
        color: #fff;
      }
    }

    .orderbetails-fahuo-db {
      // margin-top: 15rpx;
      // color: #fff;
      // font-size: 25rpx;
    }
  }

  .orderbetails-xinxi {
    padding: 17rpx;
    display: flex;
    align-items: center;
    background-color: #fff;

    .orderbetails-xinxi-left {
      // width: 65rpx;
      width: 66rpx;

      image {
        // 60
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
      }
    }

    .orderbetails-xinxi-right {
      .orderbetails-xinxi-right-hd {
        display: flex;
        align-items: center;

        .orderbetails-xinxi-right-name {
          font-size: 30rpx;
          color: #161712;
        }

        .orderbetails-xinxi-right-dh {
          font-size: 22rpx;
          color: #666;
          margin-left: 30rpx;
        }
      }

      .orderbetails-xinxi-right-db {
        margin-top: 10rpx;
        font-size: 25rpx;
        color: #161712;
      }
    }
  }

  .orderbetails-libao {
    padding: 20rpx;
    // display: flex;
    align-items: center;
    background-color: #fff;
    margin-top: 20rpx;

    .orderbetails-libao-hd {
      display: flex;

      .orderbetails-libao-hd-tu {
        width: 120rpx;

        image {
          width: 103rpx;
          height: 104rpx;
          border-radius: 10rpx;
        }
      }

      .orderbetails-libao-hd-wz {
        line-height: 50rpx;

        .orderbetails-libao-hd-wz-hd {
          font-size: 30rpx;
          color: #161712;
        }

        .orderbetails-libao-hd-wz-db {
          color: #666;
          font-size: 22rpx;
        }
      }
    }

    .orderbetails-libao-db {
      margin-top: 46rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      view:nth-child(1) {
        color: #666;
        font-size: 22rpx;
      }

      view:nth-child(2) {
        color: #f53e2e;
        font-size: 22rpx;

        text {
          font-size: 35rpx;
        }
      }
    }
  }

  .orderbetails-bianhao {
    margin-top: 20rpx;
    background-color: #fff;
    // padding: 17rpx;
    padding-left: 32rpx;

    .orderbetails-bianhao-hd {
      .orderbetails-bianhao-hd-nr {
        line-height: 50rpx;
        font-size: 22rpx;
        color: #161712;
      }
    }

    .orderbetails-bianhao-db {
      text-align: center;
      margin-top: 50rpx;

      image {
        display: inline-block;
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
      }

      text {
        color: #161712;
        font-size: 22rpx;
        margin-left: 10rpx;
      }
    }
  }

  .footer {
    // height: 150rpx;
    padding: 40rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #fff;

    .footer-left {
      font-size: 25rpx;
      color: #161712;
      width: 150rpx;
    }

    .footer-right {
      display: flex;
      justify-content: space-between;

      .footer-right-wuliu {
        padding: 15rpx 35rpx;
        border: 1rpx solid #ccc;
        border-radius: 35rpx;
      }

      .footer-right-dizhi {
        padding: 15rpx 35rpx;
        border: 1rpx solid #ccc;
        border-radius: 35rpx;
        margin-left: 20rpx;
      }

      .active {
        background-color: #7976e9;
        color: #fff;
      }
    }
  }
}

.orderItem {
  background-color: #fefefe;
  width: 100%;
  border-radius: 24rpx;
  padding: 22rpx;
  margin-top: 10rpx;

  .orderDetail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 6rpx;

    .img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 20rpx;
    }

    image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 20rpx;
    }

    .itemDetail {
      flex: 1;
      margin: 10rpx 15rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      text {
        &:first-child {
          font-weight: 700;
        }

        &:last-child {
          font-size: 24rpx;
          color: #949494;
          margin-top: 20rpx;
        }
      }
    }

    .orderNum {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      color: #949494;

      .orderPrice {
        color: #000;
        margin-bottom: 20rpx;

        text:nth-child(2) {
          font-weight: 700;
          font-size: 32rpx;
        }
      }
    }
  }

  .orderBtnGroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    // align-items: flex-end;

    .count {
      text {
        font-weight: 600;
      }
    }

    button {
      margin-top: 20rpx;
      margin-right: 0;
    }
  }
}

/* 模态框内容居中 */
.u-modal__content__text {
  text-align: center;
}

.customStyle {
  z-index: 999;
  text-align: center;
}

/* 自定义轮播图 */
.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}
</style>